<template>
    <a-card hoverable :style="style" :bodyStyle="{padding:'8px', textAlign: 'center'}">
        <template #cover>
            <div class="typeTag">
                <a-tag v-if="model.type==='movie'" color="#87d068">电影</a-tag>
                <a-tag v-if="model.type==='tv'" color="#108ee9">电视剧</a-tag>
            </div>
            <div class="scoreTag">
                <a-progress type="circle" :stroke-color="{
                  '0%': '#108ee9',
                  '100%': '#87d068',
                }" 
                :percent="model.score*10"
                :width="36" 
                >
                    <template #format="percent">
                        <span style="color: white">{{ model.score }}</span>
                    </template>
                </a-progress>
            </div>
            <img :title="model.title" :src="model.poster" />
        </template>
        <a-card-meta :title="model.title">
            <template #description>{{ model.year }}</template>
        </a-card-meta>
        <!-- <template #actions>
          <a-button type="text">
            <template #icon>
              <edit-outlined key="edit" />
            </template>
            订阅</a-button>
          <a-button type="text">
            <template #icon>
              <edit-outlined key="edit" />
            </template>
            搜索</a-button>
        </template> -->
    </a-card>
</template>
<script name="media-card" setup>
// 定义组件属性
const props = defineProps({
    model: {
        type: Object,
        default: () => ({})
    },
    style: {
        type: Object,
        default: () => ({})
    }
})
</script>
<style>
.typeTag {
    position: absolute;
    top: 4px;
    left: 4px;
}
.scoreTag {
    position: absolute;
    top: 4px;
    right: 4px;
    text-align: right;
    background-color: rgb(0,0,0,0.7);
    width: 36px;
    color: white;
    border-radius: 18px;
}
</style>